<template>
  <DraggableModal v-model:visible="handleModalVisible" :width="900" title="处理日志">
    <vxe-table
      border
      show-overflow
      ref="xTable"
      :data="tableData"
      align="center"
      height="500"
    >
      <vxe-column type="seq" width="60" title="#"></vxe-column>
      <vxe-column field="companyName" title="单位名称"></vxe-column>
      <vxe-column field="labName" title="实验室名称"></vxe-column>
      <vxe-column field="handlePerson" title="处理人"></vxe-column>
      <vxe-column field="handleDetail" title="处理详情"></vxe-column>
      <vxe-column field="modifyTime" title="处理时间">
        <template #default="{ row }">
          {{ row.modifyTime ? dayjs(row.modifyTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <a-button type="primary" @click="handleWarnBtnClick">确定</a-button>
    </template>
  </DraggableModal>
</template>
<script lang="tsx">
import { defineComponent, ref, toRefs, watch } from 'vue';
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import dayjs from 'dayjs';
export default defineComponent({
  name: 'HandleWarnLogModal',
  components: {
    DraggableModal,
  },
  emit: ['update:visible'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: [],
    },
  },
  setup(props, { emit }) {
    const handleModalVisible = ref(props.visible);
    watch(
      () => props.visible,
      (nval) => {
        handleModalVisible.value = nval;
      },
    );
    watch(handleModalVisible, (nval) => {
      emit('update:visible', nval);
    });
    const handleWarnBtnClick = () => {
      handleModalVisible.value = false;
    };
    return {
      ...toRefs(props),
      dayjs,
      handleModalVisible,
      handleWarnBtnClick,
    };
  },
});
</script>
<style lang="less" scoped></style>
